<template>
  <div class="dashboard-container">
    <!-- <el-card style="height: 120px; margin-bottom: 20px">
      <el-form label-width="80px" :model="form" :inline="true">
        <el-form-item>
          <el-input v-model="form.name" placeholder="关键词搜索" clearable />
        </el-form-item>
        <el-form-item>
          <el-select v-model="form.copywritingtypeid" placeholder="文案分类" filterable>
            <el-option v-for="a in reqCategory1" :key="a.id" :label="a.name" :value="a.id"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="searchclick" style="margin-left: 12px">筛选</el-button>
        <el-button @click="resetSearch">重置</el-button>
        <el-button @click="addrenyuan" type="success">添加</el-button>
      </el-form>
    </el-card> -->
    <el-card style="height: 80px; margin-bottom: 20px;">
      <div class="top-box">
        <el-tabs style="width: 90%;" v-model="activetyp" @tab-click="handleClickTyp">
          <el-tab-pane label="全部" name="0"></el-tab-pane>
          <el-tab-pane label="落地页" name="1"></el-tab-pane>
          <el-tab-pane label="正常套餐" name="2"></el-tab-pane>
        </el-tabs>
        <el-button style="position: absolute;right: 20px;z-index: 9;" @click="addVip" type="success">添加</el-button>
      </div>
    </el-card>
    <el-tabs style="width: 98%;margin-left: 1%;" v-model="activeState" type="card" @tab-click="handleClickState">
      <el-tab-pane label="全部" name="0"></el-tab-pane>
      <el-tab-pane label="基础产品" name="1"></el-tab-pane>
      <el-tab-pane label="收款" name="2"></el-tab-pane>
      <el-tab-pane label="优惠卷" name="3"></el-tab-pane>
      <el-tab-pane label="充值购" name="4"></el-tab-pane>
      <el-tab-pane label="单品快卖" name="5"></el-tab-pane>
      <el-tab-pane label="商城" name="6"></el-tab-pane>
      <el-tab-pane label="会员系统" name="7"></el-tab-pane>
      <el-tab-pane label="股东" name="8"></el-tab-pane>
      <el-tab-pane label="套餐" name="9"></el-tab-pane>
    </el-tabs>
    <el-table :data="tableData" border style="width: 98%;margin-left: 1%;">
      <el-table-column prop="id" label="id" width="70">
      </el-table-column>
      <el-table-column label="图片" align="center" width="90">
        <template slot-scope="scope">
          <div class="">
            <el-image style="width: 70px; height: 70px" :src='scope.row.images'></el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称">
      </el-table-column>
      <el-table-column prop="title" label="描述">
      </el-table-column>
      <el-table-column label="现价">
        <template slot-scope="scope">
          ¥ {{scope.row.price}}
        </template>
      </el-table-column>
      <el-table-column prop="" label="原价">
        <template slot-scope="scope">
          ¥ {{scope.row.originalprice}}
        </template>
      </el-table-column>
      <el-table-column prop="day" label="天数">
      </el-table-column>
      <el-table-column prop="num" label="次数">
      </el-table-column>
      <el-table-column prop="weak" label="弱提醒提前几天">
      </el-table-column>
      <el-table-column prop="strong" label="强提醒提前几天">
      </el-table-column>
      <el-table-column prop="sort" label="排序">
      </el-table-column>
      <el-table-column prop="" label="产品类型">
        <template slot-scope="scope">
          <div v-if="scope.row.typ==1">
            <el-tag>落地页</el-tag>
          </div>
          <div v-else-if="scope.row.typ==2">
            <el-tag type="success">正常套餐</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="" label="分类">
        <template slot-scope="scope">
          <div v-if="scope.row.state==1">
            基础产品
          </div>
          <div v-else-if="scope.row.state==2">
            收款
          </div>
          <div v-else-if="scope.row.state==3">
            优惠券
          </div>
          <div v-else-if="scope.row.state==4">
            充值购
          </div>
          <div v-else-if="scope.row.state==5">
            单品快卖
          </div>
          <div v-else-if="scope.row.state==6">
            商城
          </div>
          <div v-else-if="scope.row.state==7">
            会员系统
          </div>
          <div v-else-if="scope.row.state==8">
            股东
          </div>
          <div v-else-if="scope.row.state==9">
            套餐
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作" width="140">
        <template slot-scope="scope">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-button type="primary" size="mini" @click="editInfo(scope.row)">修改</el-button>
            </el-col>
            <el-col :span="12">
              <el-button type="danger" size="mini" @click="deletInfo(scope.row.id)">删除</el-button>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <Pagination2 :currentPage="this.form.pageNo" :size="this.form.pageSize" :total="total" @changelimit="changelimit"
      @changecurrentPage="changecurrentPage"></Pagination2>
    <add ref="add" @refresh="refresh"></add>
  </div>
</template>

<script>
  import {
    vipList,
    vipDelet
  } from "@/api/vippackage";
  import add from "./modules/add";
  export default {
    name: "Dashboard",
    components: {
      add
    },
    data() {
      return {
        activeState: '0',
        activetyp: '0',
        total: 0,
        tableData: [],
        form: {
          typ: 0, // 1落地页 2正常套餐
          pageNo: 1,
          pageSize: 15,
          state: 0 //1基础产品2收款 3优惠卷 4充值购 5单品快卖 6商城 7会员系统 8股东 9套餐
        },
      };
    },

    methods: {
      refresh() {
        this.getList()
      },
      editInfo(val) {
        this.$refs.add.edit(val);
      },
      addVip() {
        this.$refs.add.add();
      },
      resetSearch() {
        this.form.name = "";
        this.getList();
      },
      searchclick() {
        this.getList()
      },
      handleClickState(tab) {
        this.activeState = tab.index
        this.form.state = parseInt(tab.index)
        this.getList()
      },
      handleClickTyp(tab, event) {
        this.activetyp = tab.index
        this.form.typ = parseInt(tab.index)
        this.getList()
      },
      async getList() {
        let result = await vipList(this.form);
        if (result.code == 0) {
          if (result.data.data != []) {
            this.tableData = result.data.data;
            this.total = result.data.totalCount;
            this.tableData.forEach((item, index) => {
              // if (item.iamges != "") {
              //   this.$set(item, "images", item.images.split(","));
              // }
            });
          }
        }
      },
      changelimit(val) {
        this.form.pageSize = val;
        this.getList();
      },
      changecurrentPage(val) {
        this.form.pageNo = val;
        this.getList();
      },
      deletInfo(id) {
        this.$confirm('此操作将永久删除该套餐, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          vipDelet({
            id: id
          }).then(res => {
            this.$message.success('已删除')
            this.getList()
          })
        })
      },
    },
    watch: {

    },
    mounted() {
      this.getList()
    },
  };
</script>

<style lang="scss" scoped>
  // .dashboard {
  //   &-container {
  //     margin: 30px;
  //   }
  //   &-text {
  //     font-size: 30px;
  //     line-height: 46px;
  //   }
  // }
  .top-box {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
  }
</style>
